在昨天的練習中,當我們使用 GET 請求時,並成功得到網站中的資料,我們都用是終端機查看回傳的資訊,雖然一樣可以達到查看資料的目的,但好像缺少了什麼!!
這就不得不提到組成 Web 畫面的 HTML,它是最直覺的呈現 Web 頁面的方式。HTML 是一種標記語言,用於結構化網頁的內容。
然而,在動態網站中,指示用固定的 HTML 內容是不足以應付現在日益繁雜的網站需求,這時就可以使用 Go 模板引擎來幫我們根據不同情境動態生成 HTML 頁面了。
Go 模板引擎是 Go 語言內建的一個工具,但說穿了它就是一個內建於 Go 的一個套件,這個套件是用於將動態生成的數據注入到 HTML 中。它有幾點優勢:
這個模板引擎不僅提供安全的 HTML 輸出,也支援模板嵌套、條件語句、迴圈等功能,使開發者能夠方便地構建動態且安全的 HTML 頁面。
首先,我們必須匯入 html/template
,如果你想要在瀏覽器上看到結果,也必須匯入前天提到的 net/http
,如下:
import (
"html/template"
"net/http"
)
之前有提到結構體 struct
,這邊我們需要用到它來幫我們定義一些變數:
type PageVariables struct {
Title string
Message string
}
這邊我定義了 Title 及 Message 這兩個變數以便我等一下使用它們。
這邊跟前天提到的差不多:
package main
import (
"html/template"
"net/http"
)
func main(){
http.HandleFunc("/", handler)
http.ListenAndServe(":8080", nil)
}
此時,你去執行 go build
那一定會出錯,因為你還沒有處理完進到根目錄要處理的函式。
只差最後一步就完成了,這也是為什麼要匯入 html/tmplete 這個套件:
func handler(w http.ResponseWriter, r *http.Request) {
pageVariables := PageVariables{
Title: "冒險開始",
Message: "歡迎來到冒險之旅!",
}
tmpl, err := template.New("index").Parse(`
<!DOCTYPE html>
<html>
<head>
<title>{{.Title}}</title>
</head>
<body>
<h1>{{.Title}}</h1>
<p>{{.Message}}</p>
</body>
</html>
`)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = tmpl.Execute(w, pageVariables)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
}
package main
import (
"html/template"
"net/http"
)
type PageVariables struct {
Title string
Message string
}
func handler(w http.ResponseWriter, r *http.Request) {
pageVariables := PageVariables{
Title: "冒險開始",
Message: "歡迎來到冒險之旅!",
}
tmpl, err := template.New("index").Parse(`
<!DOCTYPE html>
<html>
<head>
<title>{{.Title}}</title>
</head>
<body>
<h1>{{.Title}}</h1>
<p>{{.Message}}</p>
</body>
</html>
`)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = tmpl.Execute(w, pageVariables)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
}
func main() {
http.HandleFunc("/", handler)
http.ListenAndServe(":8080", nil)
}
執行結果:
當你看到這個畫面就代表你成功建置了自己的網頁,當然我們不能滿足於此,明天我們將繼續往更進階的目標去邁進,我們明天見。